<template>
    <!-- <div class="addItem">p
        <h2>添加购物车项</h2>
        <form @submit.prevent="addCartItem">
            <label for="userId">用户ID:</label>
            <input type="text" id="userId" v-model="formData.userId" required><br>
            <label for="itemId">商品项ID:</label>
            <input type="text" id="itemId" v-model="formData.itemId" required><br>
            <label for="productId">具体产品ID:</label>
            <input type="text" id="productId" v-model="formData.productId" required><br>
            <label for="listPrice">单价:</label>
            <input type="number" id="listPrice" v-model="formData.listPrice" required><br>
            <label for="quantity">数量:</label>
            <input type="number" id="quantity" v-model="formData.quantity" required><br>
            <label for="total">总价:</label>
            <input type="number" id="total" v-model="formData.total" required><br>
            <button type="submit">添加</button>
        </form>
        <p v-if="message">{{ message }}</p> -->
        <!-- 添加返回按钮 -->
        <!-- <button @click="goBack">返回</button>
    </div> -->
</template>

<script setup>
// import { ref, onMounted } from 'vue';
// import { useRouter, useRoute } from 'vue-router';
// import axios from 'axios';

// const formData = ref({
//     userId: '',
//     itemId: '',
//     productId: '',
//     listPrice: '',
//     quantity: '',
//     total: ''
// });

// const message = ref('');
// const router = useRouter();
// const route = useRoute();

// onMounted(() => {
//   if (route.query) {
//     formData.value.itemId = route.query.itemId;
//     formData.value.productId = route.query.productId;
//     formData.value.listPrice = route.query.listPrice;
//     formData.value.quantity = route.query.quantity;
//     formData.value.total = route.query.listPrice * route.query.quantity;
//   }
// });

// const addCartItem = async () => {
//     try {
//         const response = await axios.post('/cartItem', formData.value);
//         message.value = response.data.message;
//     } catch (error) {
//         message.value = '添加失败';
//     }
// };

// // 返回上一页面的方法
// const goBack = () => {
//     router.back();
// };
</script>

<style scoped>
.addItem {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.addItem h2 {
    text-align: center;
    color: #333;
}

.addItem label {
    display: block;
    margin-bottom: 5px;
    color: #666;
}

.addItem input {
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.addItem button {
    width: 100%;
    padding: 10px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer; 
    margin-top: 15px;
}

.addItem button:hover {
    background-color: #0056b3;
}

.addItem p {
    text-align: center;
    color: red;
    margin-top: 10px;
}

/* 可以添加返回按钮的样式 */


</style>